<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			1.v-if
				写法：
					(1).v-if="表达式"
					(2).v-else-if="表达式"
					(3).v-else="表达式"
				适用于：切换频率较低的场景。
				特点：不展示的DOM元素直接被移除。
				注意：v-if可以和:v-else-if、v-else起使用，但要求结构不能被“打断”。
				
			2.v-show
				写法：v-show="表达式"
				适用于：切换频率较高的场景。
				特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
				
			3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<h2>当前n值是{{n}}</h2>
			<button type="button" @click="n++">点我n++</button>
			<!--v-show-->
		<h2 v-show="true">{{name}}</h2>
			<!-- v-if -->
		<h2 v-if="true">{{name}}</h2>
		
			<!-- v-if和v-else-if -->
<!-- 		<h2 v-if="n==1">one</h2>
			<h2 v-else-if="n==2">two</h2>
			<h2 v-else>other</h2> -->
			
			<!-- v-if和template的配合 -->
			<template v-if="n==1">
				<h2>1</h2>
				<h2>2</h2>
				<h2>3</h2>
			</template>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			const vm = new Vue({
				el:'#root',
				data:{
					name:'上硅谷',
					a:false,
					n:1
				}
			})
		</script>
	</body>
</html>
